<template>
  <div>
    <div bg-white p-30rpx flex items-center mb-10rpx v-if="orderGoods">
      <image w-120rpx h-120rpx mr-20rpx shrink-0 :src="orderGoods.image"></image>
      <div>
        <div text-28rpx mb-10rpx class="ellipsis">{{ orderGoods.goodsName }}</div>
        <div>
          <span style="color: #ff3c2a;">{{ unitPrice(orderGoods.goodsPrice, '￥') }}</span>
          <span ml-30rpx text-neutral-400>x{{ orderGoods.num }}</span>
        </div>
      </div>
    </div>

    <div bg-white p-30rpx flex items-center mb-10rpx>
      <div mr-100rpx shrink-0>
        <div text-28rpx mb-10rpx>商品评价</div>
        <div text-24rpx text-neutral-300>满意请打好评哦</div>
      </div>
      <div mt-10rpx>
        <nut-radio-group v-model="form.grade" direction="horizontal">
          <nut-radio shape="button" label="GOOD">好评</nut-radio>
          <nut-radio shape="button" label="MODERATE">中评</nut-radio>
          <nut-radio shape="button" label="WORSE">差评</nut-radio>
        </nut-radio-group>
      </div>
    </div>
    <div bg-white py-30rpx flex items-center mb-10rpx>
      <nut-textarea v-model="form.content" limit-show max-length="200"
        placeholder="宝贝满足您的期待吗？说说它的优点和美中不足的地方吧.您的评价会帮助更多的人" />
    </div>
    <!-- 上传凭证 -->
    <div bg-white p-30rpx flex items-center mb-10rpx>
      <uploader @success="($event: any) => { form.images.push($event) }"
        @delete="($event: any) => { form.images.splice($event, 1) }" />
    </div>
    <div bg-white p-30rpx flex items-start flex-col mb-10rpx text-neutral-600 leading-50rpx>
      <div flex items-center><span mr-30rpx>描述相符</span><nut-rate v-model="form.descriptionScore" /></div>
      <div flex items-center><span mr-30rpx>服务态度</span><nut-rate v-model="form.serviceScore" /></div>
      <div flex items-center><span mr-30rpx>物流服务</span><nut-rate v-model="form.deliveryScore" /></div>
    </div>


    <submit title="提交" :loading="loading" @click="onSubmit" />
  </div>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { getOrderDetail } from "@/api/order";
import { unitPrice } from '@/utils/filters';
import uploader from '@/components/upload/index.vue';
import submit from '@/components/sheet-btn/index.vue';
import { commentsMemberOrder } from "@/api/member";

const loading = ref<boolean>(false);
const routerVal = ref<any>();
const orderGoods = ref<any>();
const form = ref<any>({
  content: "", //评价详情
  goodsId: "", //商品id
  grade: "GOOD", //默认为好评
  orderItemSn: "", //商品的sn
  skuId: "", //商品skuId
  descriptionScore: 5, //默认描述得分为5分
  serviceScore: 5, //默认服务得分为5分
  deliveryScore: 5, //默认物流得分为5分
  images: []
})
const currentData = ref<any>({
  data: '',
  index: 0
})


// 订单详情
async function getOrderInfo() {
  const res = await getOrderDetail(routerVal.value.orderSn)
  if (res.data.success) {
    orderGoods.value  = res.data.result.orderItems.filter((item: any) => item.skuId === routerVal.value.skuId)[0];
    form.value.goodsId = orderGoods.value.goodsId;
    form.value.skuId = orderGoods.value.skuId;
  }
}

// 提交评价
async function onSubmit() {
  loading.value = true;
  const res = await commentsMemberOrder(form.value);
  loading.value = false
  if (res.data.success) {
    loading.value = false;
    uni.showToast({
      title: "发布评价成功",
      duration: 2000,
      icon: "none",
      success: () => {
        setTimeout(() => {
          uni.navigateBack();
        }, 500);
      },
    });
  }
}



onLoad((options: any) => {
  routerVal.value = options;
  form.value.orderItemSn = routerVal.value.sn;
  getOrderInfo();
})




</script>

<style scoped lang="scss">
.ellipsis {
  /*width: 100%;*/
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>
